import {deepFullCopy, messages} from "share/common";
import React, { Component, PropTypes } from 'react'
import {connect} from 'react-redux'
import customField from "share/customField";
import Annotate from 'components/template/annotate'
import { Spin } from 'antd'
import Condition from 'components/condition'
const { If } = Condition;

class SlideDocumentFields extends Component {

  state = {
    loading: false,
    annotate: []
  };

  static contextTypes = {
    info: PropTypes.object,
    jobInfo: PropTypes.object,
    applicant: PropTypes.object,
    form: PropTypes.object,
    readOnly: PropTypes.bool
  };

  componentDidMount() {
    this.getAnnotate();
  }

  getAnnotate = () => {
    const { annotateService } = this.props;
    if(annotateService) {
      this.setState({ loading: true });
      annotateService()
        .then(res => {
          this.setState({ annotate: res.data });
        })
        .finally(() => {
          this.setState({ loading: false });
        })
    }
  };

  dealApplicantInfo = () => {
    const { applicant, jobInfo } = this.context;
    let applicantInfo = deepFullCopy(applicant || {});
    jobInfo && jobInfo.departmentOID && (applicantInfo.departmentOID = jobInfo.departmentOID);
    jobInfo && jobInfo.companyOID && (applicantInfo.companyOID = jobInfo.companyOID);
    return applicantInfo;
  };

  getAnnotateList = fieldOID => {
    const { loginUser } = this.props;
    const { annotate } = this.state;
    let list = annotate.filter(a => a.target === fieldOID);
    list.map(item => item.disabled = item.createdBy !== loginUser.userOID);
    return list;
  };

  render() {
    const { info, form, readOnly } = this.context;
    const { loading } = this.state;
    const { annotateDisabled } = this.props;
    let custFormValues = info.custFormValues || info.customFormValues || []; //自定义表单
    custFormValues.map(item => {
      if(item.messageKey === 'attachment' || item.messageKey === 'image'){
        item.showFileName = true; // 报销单头部附件展示名字 不展示图片
        item.attachmentImages.map(img => {
          img.fileName = img.fileName.replace(/(.*)_(\d*)(\.)/,'$1$3');
        })
      }
    });
    let signName = customField.getSignNameForSubmitter(form && form.customFormPropertyMap);
    return (
      <Spin spinning={loading}>
        <div className='slide-document-fields'>
          <div className='slide-document-fields-title'>{messages('common-1.key1269')/*单据信息*/}</div>
          {customField.renderFields(
            custFormValues,
            info,
            this.dealApplicantInfo(),
            'auditView',
            signName, true
          ).map(item => (
            <Annotate
              onChange={this.getAnnotate}
              params={{
                typeName: 'DOCUMENT',
                entityID: info.id,
                target: item.fieldOID
              }}
              annotateList={this.getAnnotateList(item.fieldOID)}
              key={item.fieldOID}
              disabled={annotateDisabled}
            >
              <div className={this.classNames({'slide-document-fields-box': true, 'disabled': annotateDisabled})}>
                <div className='slide-document-fields-item'>
                  {item.name}
                  {item.name && ' : '}
                  <span className='slide-document-fields-item-value'>{item.content}</span>
                </div>
              </div>
            </Annotate>
          ))}
        </div>
      </Spin>
    )
  }

}

function mapStateToProps(state) {
  return {
    loginUser: state.login.loginUser
  }
}

export default connect(mapStateToProps)(SlideDocumentFields);
